<template>
  <div class="page-box">
    <div class="operation-box cenBet">
      <div class="operation-left">
        <el-button @click="$openPage('/setUp/provalProcessSettings/provalProcess')" icon="el-icon-circle-plus-outline" type="primary">新增流程</el-button>
        <el-button v-if="tablePaginationQuery.total" type="text">共计<span>{{tablePaginationQuery.total}}</span>条</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <tableCom :data="tableData" :columns="tableColumn" v-loading="tableLoading" max-height="780" element-loading-text="数据加载中..." border>
      <div slot-scope='row' slot="operation">
        <el-button @click="$openPage('/setUp/provalProcessSettings/provalProcess',row.row)" type="text">编辑</el-button>
        <el-button @click="approvalConfig_delete(row.row)" class="danageColor" type="text">删除</el-button>
      </div>
    </tableCom>
    <!-- 分页 -->
    <pagination v-if="tablePaginationQuery.total" :query="tablePaginationQuery" @paginationCallBack="paginationCallBack" />

  </div>
</template>
<script>
import service from "@/api";
import tableCom from "@/components/tableCom"; //表格组件
import { tableColumn } from "./tableColumn.js"; //表格组件数据
import pagination from "@/components/pagination"; //分页组件
export default {
  components: { tableCom, pagination },
  data() {
    return {
      tablePaginationQuery: { start: 0, limit: 10, total: 0, current: 1 }, //表格分页参数
      tableLoading: false,
      tableData: [], //表格数据
      tableColumn: tableColumn() //表格
    };
  },
  created() {
    this.initFun();
  },
  methods: {
    initFun() {
      this.approvalConfig_list();
    },
    paginationCallBack() {
      // 分页的回掉函数
      this.approvalConfig_list();
    },
    // 分页查询ApprovalConfig
    async approvalConfig_list() {
      const { start, limit } = this.tablePaginationQuery;
      this.tableLoading = true;
      const { data = {} } = await service.approvalConfig_list({
        start,
        limit,
        current: 1
      });
      this.tableLoading = false;
      this.tablePaginationQuery.total = data.results || 0;
      this.tableData = data.rows;
      // console.log(this.tableData);
    },
    // 删除流程
    async approvalConfig_delete(row) {
      const $confirm = await this.$confirm("此操作将进行删除");
      if (!$confirm) {
        return;
      }
      this.tableLoading = true;
      const { success } = await service.approvalConfig_delete({
        id: row.id
      });
      this.tableLoading = false;
      if (success) {
        this.$message({
          message: `删除成功`,
          type: "success"
        });
        this.approvalConfig_list();
      }
    }
  }
};
</script>
